<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>报修报事</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="//cdn.bootcss.com/weui/0.4.3/style/weui.min.css">
		<link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/0.8.3/css/jquery-weui.min.css">
		<link rel="stylesheet" href="../css/index.css" />
		<style type="text/css">

		</style>
	</head>

	<body id="bxbs">
		<div class="weui_cells">
			<div class="weui_cell">
				<div class="weui_cell_bd weui_cell_primary">
					<p>联系人</p>
				</div>
				<div class="weui_cell_ft" id="name">
					
				</div>
			</div>
			<div class="weui_cell">
				<div class="weui_cell_bd weui_cell_primary">
					<p>联系电话</p>
				</div>
				<div class="weui_cell_ft" id="phone">
					
				</div>
			</div>
			<div class="weui_cell">
				<div class="weui_cell_bd weui_cell_primary">
					<p>地址</p>
				</div>
				<div class="weui_cell_ft" id="address">
					
				</div>
			</div>
		</div>
		<div class="laststep">
			<div id="add">
				<p>请选择</p>
				<!--<span class="active" value="1">报修</span>
				<span value="2">报事</span>-->
			</div>
			<textarea id="detail" rows="5" placeholder="请详细描述问题"></textarea>
		</div>
		<div class="uploadimg">
			<div>
				<p>图片上传 (0-5张)</p>
			</div>
			<section>
				<div class="imgbox" id="chooseImg" style="float:left;">
					<img src="../img/tupian.png" />
				</div>
				<div style="clear: both;"></div>
			</section>

			<a href="javascript:;" class="weui_btn weui_btn_primary submit">提交</a>
		</div>

		<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
		<script src="//cdn.bootcss.com/jquery-weui/0.8.3/js/jquery-weui.min.js"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script src="../js/basic.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var userId, imgStr;
			var ip_addr = getUrl();
			$(document).ready(function() {
				setSelectList();
				setUserMsg();
				var myurl = location.href.split('#')[0];
				$.ajax({
					type: 'post',
					data: {
						"url": myurl
					},
					url: ip_addr + 'WeChat/Interface/GetJSAPISignature', //用于文件上传的服务器端请求地址
					dataType: 'json', //返回值类型 一般设置为json
					success: function(data) { //服务器成功响应处理函数
						if(data.code == 0) {
							var GetTimeStamp_Str = data.data.timeStamp;
							var nonceStr_Str = data.data.nonceString;
							var signature_Str = data.data.signature;
							var appId = data.data.appId;
							wx.config({
								debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
								appId: appId, // 必填，公众号的唯一标识
								timestamp: GetTimeStamp_Str, // 必填，生成签名的时间戳
								nonceStr: nonceStr_Str, // 必填，生成签名的随机串
								signature: signature_Str, // 必填，签名，见附录1
								jsApiList: ['chooseImage', 'uploadImage', 'getLocalImgData'] // 必填，需要使用的JS接口列表
							});
						} else if(data.code == -1) {
							alert(data.result);
						}
					}
				});
			});

			function setSelectList() {
				if(!GetQueryString("type")) {
					return false;
				}
				var selectType = GetQueryString("type");
				$("#add").children("span").remove();
				var selectHtml = '';
				switch(selectType) {
					case "1":
						selectHtml = '<span class="active" value="1">报修</span><span value="2">报事</span>';
						document.title = '报修报事';
						break;
					case "2":
						selectHtml = '<span class="active" value="3">投诉</span><span value="4">表扬</span>';
						document.title = '投诉表扬';
						break;
					case "3":
						selectHtml = '<span class="active" value="5">咨询</span><span value="6">建议</span>';
						document.title = '咨询建议';
						break;
					default:
						break;
				}
				$("#add").append(selectHtml);
				//改变样式
				$(".laststep > div > span").click(function() {
					$(this).addClass("active").siblings().removeClass("active");
				});
			}

			function setUserMsg() {
				
				if(localStorage.getItem("userMsg") == null || localStorage.getItem("userMsg") == undefined){
					$.alert({
						title: '温馨提示',
						text: '很抱歉，您还未登录，请登录!',
						onOK: function() {
							window.location.href = 'wode.html';
						}
					});
				}else{
					var userMsg = JSON.parse(localStorage.getItem("userMsg"));
					userId = userMsg.id;
					var name = userMsg.username;
					var phone = userMsg.phone;
					var addressId = userMsg.addressId;
					$("#name").text(name);
					$("#phone").text(phone);
					getAddress(addressId)
				}
				
				
			}

			function getAddress(addressId) {
				$.ajax({
					type: 'post',
					dataType: "json",
					url: ip_addr + 'user/getAddress',
					data: {
						id: addressId
					},
					success: function(data) {
						var result = data.data;
						if(data.code == 0) {
							var address = result.name + result.building + "幢" + result.bunit + "单元" + result.room + "室";
							$("#address").text(address);
						} else if(code == 1001) {
							$.alert({
								title: '温馨提示',
								text: '很抱歉，您还未登录，请登录!',
								onOK: function() {
									window.location.href = 'wode.html';
								}
							});
						} else {
							$.alert(data.msg, function() {

							});
						}
					}
				});
			}
			$("#chooseImg").click(function() {
				if($("#chooseImg").siblings().length - 1 >= 5) {
					return;
				}
				var imgNum = 5 - ($("#chooseImg").siblings().length - 1 == -2 ? 0 : $("#chooseImg").siblings().length - 1);
				wx.chooseImage({
					count: imgNum, // 默认9
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						var localId = res.localIds; //注意添加.toString()

						$.showLoading("正在上传...");
						//						for(var i = 0; i < localId.length; i++) {
						//							if(i == localId.length - 1) {
						uploadImg(localId);
						//						$("textarea").val($("textarea").val() + localId);
						//							} else {
						//								uploadImg(localId, true);
						//							}
						//						}
					},
					cancel: function() {
						//取消拍照或从手机相册中选图
					},
					fail: function() {
						//拍照或从手机相册中选图失败
					}
				});
			});
			$(document).on("click", ".submit", function() {
				var type = $("#add .active").attr("value");
				var showMsg = '';
				var showLogin = '';
				switch(type) {
					case "1":
						showMsg = '我们已经收到您的报修，会在XX个工作日内联系你，请保持电话畅通！';
						showLogin = '很抱歉，您还未登录，请登录再进行报修报事。';
						break;
					case "2":
						showMsg = '我们已经收到您的报事，会在XX个工作日内联系你，请保持电话畅通！';
						showLogin = '很抱歉，您还未登录，请登录再进行报修报事。';
						break;
					case "3":
						showMsg = '谢谢您的表扬，我们会更加努力。';
						showLogin = '很抱歉，您还未登录，请登录再进行表扬投诉。';
						break;
					case "4":
						showMsg = '谢谢您的投诉，我们会更加努力。';
						showLogin = '很抱歉，您还未登录，请登录再进行表扬投诉。';
						break;
					case "5":
						showMsg = '谢谢您的咨询，我们会更加努力。';
						showLogin = '很抱歉，您还未登录，请登录再进行咨询建议。';
						break;
					case "6":
						showMsg = '谢谢您的建议，我们会更加努力。';
						showLogin = '很抱歉，您还未登录，请登录再进行咨询建议。';
						break;
					default:
						break;
				}

				imgStr = "";
				for(var i = 0; i < $(".myUpLoadImg").length; i++) {
					imgStr += $(".myUpLoadImg").eq(i).attr("data-mediaId") + ",";
				}
				imgStr = imgStr.substring(0, imgStr.length - 1);
				//表单数据验证
				if($("#detail").val() == "") {
					$.alert("请填写问题描述");
					return;
				}
				$.ajax({
					type: 'post',
					dataType: "json",
					url: ip_addr + 'repair/addRepair',
					data: {
						userId: userId,
						type: type,
						detail: $("#detail").val(),
						imgs: imgStr
					},
					success: function(data) {
						var result = data.data;
						if(data.code == 0) {
							$.alert({
								title: '温馨提示',
								text: showMsg,
								onOK: function() {
									//点击确认
									window.location.href = 'property.html';
								}
							});
						} else if(data.code == 1001) {
							$.alert({
								title: '温馨提示',
								text: showLogin,
								onOK: function() {
									window.location.href = 'wode.html';
								}
							});
						} else {
							$.alert(data.msg, function() {
								
							});
						}
					}
				});

			});
			var nowImglength = 0;
			var imgCount = 0;

			function uploadImg(localId, closeLoding) {
				console.log(localId.length);
				if(localId.length > imgCount) {
					wx.uploadImage({
						localId: localId[imgCount], // 需要上传的图片的本地ID，由chooseImage接口获得
						isShowProgressTips: 0, // 默认为1，显示进度提示
						success: function(res) {
							var mediaId = res.serverId; // 返回图片的服务器端ID
							wx.getLocalImgData({
								localId: localId[imgCount], // 图片的localID
								success: function(res) {
									var localData = res.localData;
									$("#chooseImg").before('<div class="imgbox" style="float:left;"><img class="myUpLoadImg" data-mediaId="' + mediaId + '" src="' + localId[imgCount] + '"/><div class="closeIcon" onclick="closeThisImg(this)">x</div></div>');
									imgCount++;
									uploadImg(localId);
								}
							});
						}
					});
				} else {
					$.hideLoading();
					imgCount = 0;
				}

			}

			function closeThisImg(obj) {
				$(obj).parent().remove();
			}
		</script>
	</body>

</html>